<template>
  <div class="student">
    <V-Header></V-Header>
    <!-- PC -->
    <el-row class="headline">
      <el-col :span="6">
        <router-link :to="{name:'Student'}">
          <el-button class="headlinebtn active" icon="el-icon-tickets">
            <el-col tag="span" style="line-height: 0.14rem;">学生自评</el-col>
          </el-button>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link :to="{name:'Evaluate'}">
          <el-button class="headlinebtn" icon="el-icon-user">
            <el-col tag="span" style="line-height: 0.14rem; ">学生互评</el-col>
          </el-button>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link :to="{name:'Transcript'}">
          <el-button class="headlinebtn" icon="el-icon-edit-outline">
            <el-col tag="span" style="line-height: 0.14rem;">学生成绩</el-col>
          </el-button>
        </router-link>
      </el-col>
    </el-row>
    <div class="maincont">
      <el-row>
        <el-col :sm="10" :offset="1" :xs="{span:22,offset:0}" style="margin-bottom:0.2rem">
          <div class="iFont1_1">个人信息</div>
          <div class="iFont1">
            姓 名：
            <span>{{list.full_name}}</span>
          </div>
          <div class="iFont1">
            学 校：
            <span>{{list.school_title}}</span>
          </div>
          <div class="iFont1">
            年 级：
            <span>{{list.grade_year_title}}</span>
          </div>
          <div class="iFont1">
            班 级：
            <span>{{list.grade_title}}</span>
          </div>
        </el-col>
        <el-col :sm="10" :offset="1" :xs="{span:22,offset:0}" style="margin-bottom:0.2rem">
          <div class="iFont1_1">活动日期</div>
          <div style="margin-top:0.2rem"></div>
          <el-select
            style="margin-left: 0.3rem; border:1px solid rgba(166, 173, 215, 1);border-radius: 0.2rem;"
            v-model="seltime"
            @change="onchange()"
            placeholder="请选择"
           >
            <el-option v-for="(item,index) in times" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <div class="iFont1">活动主题：<span>{{themeName||'暂无'}}</span></div>
          <div class="iFont1">小组名称：<span>{{teamName||'暂无'}}</span></div>
        </el-col>
      </el-row>
      
      <!-- 学校信息 -->

      <!-- PC -->
      <!-- <el-row class="activityinfo" style="padding-bottom:1.5rem">
        <el-col :offset="2" :span="10" :xs="{span: 12, offset: 0}">
          <li>
            <span>个人信息</span>
            <div class="iFont1">姓  名：{{list.full_name}}</div>
            <div class="iFont1">学  校：{{list.school_title}}</div>
            <div class="iFont1">班  级：{{list.grade_title}}</div>
          </li>
        </el-col>
        <el-col :span="10" :xs="{span: 12, offset: 0}" class="hidden-xs-only">
          <li>
            <span>活动日期：</span>
            <div style="margin-top:0.1rem"></div>
            <el-select v-model="seltime" @change="onchange()" placeholder="请选择">
              <el-option v-for="(item,index) in times" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <div class="iFont1">活动主题：{{list.grade_title}}</div>
            <div class="iFont1">小组名称：{{list.grade_title}}</div>
          </li>
        </el-col>
      </el-row>
      <el-row class="activityinfo  hidden-sm-and-up" style="padding-bottom:1.3rem">
        <el-col :span="10" :xs="{span: 12, offset: 0}">
          <li>
            <span>活动日期：</span>
            <div style="margin-top:0.1rem"></div>
            <el-select v-model="seltime" @change="onchange()" placeholder="请选择">
              <el-option v-for="(item,index) in times" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <div class="iFont1">活动主题：{{list.grade_title}}</div>
            <div class="iFont1">小组名称：{{list.grade_title}}</div>
          </li>
        </el-col>
      </el-row>-->
      <!-- <el-row class="activityinfo hidden-xs-only">
        <el-col :offset="2" :span="10" :xs="{span: 12, offset: 0}">
          <li>
            <span>学校：</span>
            {{list.school_title}}
          </li>
        </el-col>
        <el-col :span="10" :xs="{span: 12, offset: 0}">
          <li>
            <span>活动日期：</span>
            <el-select v-model="seltime" @change="onchange()" placeholder="请选择">
              <el-option v-for="(item,index) in times" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </li>
        </el-col>
      </el-row>-->
      <!-- wap -->
      <!-- <el-row class="activityinfo hidden-sm-and-up">
        <li>
          <span>个人信息</span>
          <div class="iFont1">姓  名：{{list.full_name}}</div>
          <div class="iFont1">学  校：{{list.school_title}}</div>
          <div class="iFont1">班  级：{{list.grade_title}}</div>
        </li>
        <li>
          <span>活动日期</span>
          <div style="margin-top:0.1rem"></div>
          <el-select v-model="seltime" @change="onchange()" placeholder="请选择">
            <el-option v-for="(item,index) in times" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <div class="iFont1">活动主题：{{list.grade_title}}</div>
          <div class="iFont1">小组名称：{{list.grade_title}}</div>
        </li>
      </el-row>-->
      <!-- 小组 -->

      <el-row class="groupinfo">
        <el-col :sm="{span: 22, offset: 1}">
          <p
           style="color:#999999; font-size:0.20rem; line-height:0.36rem; margin-bottom:0.2rem">说明：请根据你在当天活动中的实际情况勾选是否担任组长和是否发言，并写上发言次数。</p>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column
              prop="base"
              align="center"
              label="活动名称"
              style="color:#273274;"
              min-width="25%"
            ></el-table-column>
            <el-table-column align="center" label="是否担任组长" min-width="25%">
              <template slot-scope="scope">
                <el-select v-model="scope.row.is_leader" placeholder="请选择" style="border:1px solid rgba(166, 173, 215, 1);border-radius: 0.2rem;">
                  <el-option
                    v-for="(item,index) in scope.row.is_leaders"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否发言" min-width="25%">
              <template slot-scope="scope">
                <el-select v-model="scope.row.is_speck" placeholder="请选择" style="border:1px solid rgba(166, 173, 215, 1);border-radius: 0.2rem;">
                  <el-option
                    v-for="(item,index) in scope.row.is_specks"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发言次数" min-width="25%">
              <template slot-scope="scope">
                <el-input
                  :readonly="scope.row.is_speck == 0"
                  v-model="scope.row.speck_num"
                  type="text"
                  style="border:1px solid rgba(166, 173, 215, 1);border-radius: 0.2rem;" @focus="scope.row.speck_num=='0'&scope.row.is_speck=='1'?scope.row.speck_num='':scope.row.speck_num" @blur="''==scope.row.speck_num||'0'==scope.row.speck_num?scope.row.speck_num=0:scope.row.speck_num"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 提交数据 -->
      <el-button type="primary" class="x-middle tijiao" @click="onsubie">提交</el-button>
    </div>
  </div>
</template>

<script>
import VHeader from "@/components/Header";
export default {
  name: "teacher",
  components: {
    VHeader,
  },
  data() {
    return {
      list: "",
      times: "",
      seltime: "",
      tableData: [
        // {
        //   teamid: "", //活动id
        //   base: "", //活动名
        //   speck_num: "", //次数
        //   is_specks: [
        //     {
        //       label: "否",
        //       value: "0"
        //     },
        //     {
        //       label: "是",
        //       value: "1"
        //     }
        //   ],
        //   is_speck: "", //是否发言
        //   is_leaders: [
        //     {
        //       label: "否",
        //       value: "0"
        //     },
        //     {
        //       label: "是",
        //       value: "1"
        //     }
        //   ],
        //   is_leader: "" //是否组长
        // }
      ],
      themeName:'',
      teamName:''
    };
  },
  watch:{
    seltime(){
      this.getztorteam();
    }
  },
  methods: {
    getList() {
      this.$api.get("/student", {}).then((res) => {
        if (res.data.code == "1") {
          this.list = res.data.data;
          this.times = res.data.data.activity_time_concise;
          this.seltime =
            res.data.data.activity_concise.length != 0
              ? res.data.data.activity_time_concise[0]
              : "";
          this.$store.commit("setWapLoading", {
            username: res.data.data.full_name + "学生"
          });
          this.onchange();
          
        }
      });
    },
    // 新增获取活动主题和小组
    getztorteam(){
      this.$api.get("/student/team", {
        activity_time:this.seltime,
      }).then((res) => {
        if (res.data.code == "1") {
          this.themeName = res.data.data.research_title
          this.teamName = res.data.data.alias_title
        }
      });
    },
    onchange() {
      this.$api
        .get("/student/appraisal", {
          time: this.seltime,
        })
        .then((res) => {
          if (res.data.code == 1) {
            if (res.data.data != "") {
              var arr = [];
              res.data.data[0].teams.forEach((item, index) => {
                let json = {};
                json.base = item.activity_title;
                json.is_leader = item.is_leader.toString();
                json.is_speck = item.is_speck.toString();
                json.speck_num = item.speck_num;
                json.team_id = item.team_id;
                json.is_specks = [
                  {
                    label: "否",
                    value: "0",
                  },
                  {
                    label: "是",
                    value: "1",
                  },
                ];
                json.is_leaders = [
                  {
                    label: "否",
                    value: "0",
                  },
                  {
                    label: "是",
                    value: "1",
                  },
                ];
                arr.push(json);
              });
              this.tableData = arr;
            } else {
              this.tableData = [];
            }
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true,
            });
          }
        });
    },
    onsubie() {
      var _this = this;
      this.$confirm("确定提交吗？", "", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        center: true,
      })
        .then(() => {
          _this.setdata();
        })
        .catch(() => {});
    },
    setdata() {
      let team = {};
      
      this.tableData.forEach((item, index) => {
        team["team" + "[" + index + "]" + "[tid]"] = item.team_id;
        team["team" + "[" + index + "]" + "[is_leader]"] = item.is_leader;
        team["team" + "[" + index + "]" + "[is_speck]"] = item.is_speck;
        team["team" + "[" + index + "]" + "[speck_num]"] = item.speck_num;
      });
      team.time = this.seltime;
      this.$api.post("/student/appraisal", team).then((res) => {
        if (res.data.code == 1) {
          this.$alert("您已提交成功，请填学生互评。", "", {
            confirmButtonText: "是",
          }).then(() => {
            this.$router.push({
              name: "Evaluate",
              params: { time: this.seltime },
            });
          });
        } else {
          this.$message({
            offset: "400",
            message: res.data.message,
            showClose: true,
          });
        }
      });
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#FAFAFA;color:#273274";
      }
    },
  },
  created() {
    this.getList();
    history.pushState(null,null,document.URL);
    window.addEventListener("popstate", function(e) { 
      history.pushState(null,null,document.URL);
    }, false);
  },
};
</script>

<style lang="less">
.iFont1_1 {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(38, 49, 115, 1);
  line-height: 0.3rem;
}
.iFont1_1:before {
  content: "";
  height: 10px;
  width: 6px;
  border-left: 0.07rem solid rgba(38, 49, 115, 1);
  background: rgba(38, 49, 115, 1);
  margin-right: 0.1rem;
}
.iFont1 {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-top: 0.2rem;
  margin-left: 0.3rem;
  span {
    color: #666666;
  }
}
.maincont {
  input {
    height: 0.5rem;
    line-height: 0.35rem;
    // width: 2rem;
    // max-width: 144px;
    // background: rgba(246, 246, 246, 0.7);
    border: none;
    font-size: 0.20rem;
    color: rgba(166, 173, 215, 1);
    text-align: center;
    // border: 0.01rem solid rgba(166, 173, 215, 1);
    border-radius: 0.2rem;
    &::-webkit-input-placeholder {
      color: #333333;
    }
  }
}

.groupinfo {
  .el-table {
    border-radius: 0.1rem;
    .el-select {
      width: 100%;
      max-width: 141px;
      input {
        // height: 0.65rem;
        line-height: 0.35rem;
        // width: 3rem;
        max-width: 144px;
        // background: rgba(246, 246, 246, 0.7);
        border: none;
        font-size: 0.20rem;
        color: rgba(166, 173, 215, 1);
        text-align: center;
        // border: 0.01rem solid rgba(166, 173, 215, 1);
        border-radius: 0.2rem;
        &::-webkit-input-placeholder {
          color: #333333;
        }
      }
    }
  }
  .referral {
    font-size: 0.24rem;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin-top: 21px;
  }
}
.groupinfo{
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: rgba(166, 173, 215, 1);
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: rgba(166, 173, 215, 1);
  }

}

.headline {
  width: 100%;
  height: 1.4rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.11);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.headlinebtn {
  width: 100%;
  max-width: 2.81rem;
  height: 0.64rem;
  border-radius: 32px;
  font-size: 0.26rem;
  color: #333333;
  border: none;
  background: rgba(246, 246, 246, 1);
  span {
    display: inline-block;
  }
}
.active {
  background: rgb(34, 49, 115) !important;
  color: rgba(255, 255, 255, 1) !important;
}
// .student {
// }
.maincont {
  box-sizing: border-box;
  padding: 0.51rem 10px;
  margin-bottom: 29px;
}
.tijiao {
  width: 1.74rem;
  height: 0.6rem;
  background: rgba(38, 49, 115, 1) !important;;
  // box-shadow: 0 0 0.1rem rgba(66, 177, 226, 1);
  border-radius: 0.3rem;
  margin-top: 0.56rem;
  font-size: 0.22rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: 36px;
}
.el-message-box .el-message-box__btns .el-button--primary{
  background: rgba(38, 49, 115, 1) !important;
}
.el-table .cell{
  font-size: 0.22rem;
}
.el-message-box .el-message-box__btns{
  display: flex;
  justify-content: space-around;
}
</style>
